<template>
    <div class="test">
        <div class="testBox">
            <div class="box">
                <el-table
                        v-loading="loading"
                        :data="tableData"
                        :header-cell-style="{textAlign:'center',fontSize: '16px',fontWeight:500,color:'#000'}"
                        :row-style="{marginTop:'16px',borderSpacing:'20px'}"
                        :cell-style="{textAlign:'center',color:'#000'}"
                        style="width: 100%;
                    background: #F2F4FF;
                    border-collapse: separate !important;
                    border-spacing: 10px !important;
                    ">
                    <el-table-column
                            fixed
                            prop="name"
                            label="考试名称"
                            :show-overflow-tooltip=true
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="timeStatus"
                            label="考试状态"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="timeRange"
                            label="考试时间"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="submitType"
                            label="交卷状态"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="score"
                            label="分数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                    <template slot-scope="scope">
<!--一考完和未考完-->
                          <el-button  @click="tokeTest(scope.row,0)" type="text" size="small" v-if="joinJudge(scope.row)">参加考试</el-button>
                          <el-button  @click="tokeTest(scope.row,1)" type="text" size="small" v-if="catJudge(scope.row)">查看试卷</el-button>
                            <el-button type="text" size="small" @click="downLoad(scope.row)" v-if="attach(scope.row)">附件信息</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div class="pageBox">
<!--                    <div style="text-align: right;" class="page">-->
<!--                        <el-pagination-->
<!--                                hide-on-single-page-->
<!--                                @current-change="currentChange"-->
<!--                                :current-page="currentPage"-->
<!--                                :page-size="pageSize"-->
<!--                                layout=" prev, pager, next"-->
<!--                                :total="total">-->
<!--                        </el-pagination>-->
<!--                    </div>-->
                </div>
            <!--翻页-->
                <div class="changePage">
                    <el-pagination
                            background
                            prev-text="上一页"
                            next-text="下一页"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            layout="prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

            </div>
        </div>
        <index-bottom></index-bottom>
    </div>
</template>

<script>
  import indexBottom from '../../components/indexBottom'
  import {getTestPaperList} from '../../api/course'
  export default {
    name: 'test',
    components:{indexBottom},
    created () {
      this.onLoad()
    },
    data(){
      return{
        loading:true,
        currentPage:1,
        pageSize:10,
        total:100,
        tableData: [],
      // 是否考试结束
          hasResult:false
      }
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.currentPn=this.pageSize*(this.currentPage-1)+1
          this.onLoad()
            console.log(`当前页: ${val}`);
        },
      //获取列表
      onLoad(){
        let obj = {
          studentId:this.$store.state.user.userInfo.id,
          pageSize: this.pageSize,
          pageNum:this.currentPage,
        }
        getTestPaperList(obj).then(res=>{
          if (res.code === 200){
            this.loading = false
            this.total = res.total
            console.log(res)
            let nowDate=new Date();
            //处理数据
            res.rows.forEach(i=>{
              i.timeRange=i.startTime.substring(0,16)+"--"+i.endTime.substring(0,16);
              i.submitType=i.isSubmit===1?'已提交':'未提交';
              i.timeStatus=new Date(i.startTime)>nowDate?'未开始':new Date(i.endTime)>nowDate?'进行中':'已结束';
              i.timeStatusNum=new Date(i.startTime)>nowDate?0:new Date(i.endTime)>nowDate?1:2;
              i.score=i.score==null?'暂无':i.score
            })
            console.log( res.rows)
            this.tableData =  res.rows
          }
        })
      },
      //参加考试按钮显示状态
      joinJudge(data){
          let nowDate=new Date();
          let start=new Date(data.startTime)
          let end=new Date(data.endTime)
        //如果考试时间不到或者考试时间结束，不显示参加考试
        if(start>nowDate){
            return false;
        }else if(end>nowDate){
          return true;
        }else if((data.isSubmit===0||data.isSubmit===null)&&end<nowDate){
            return true;
        }else{
          return false;
        }
      },
      //是否展示查看试卷的按钮
      catJudge(data){
        let nowDate=new Date();
        let end=new Date(data.endTime)
        //考试时间结束，并且提交过的，展示此按钮
        return end < nowDate && data.isSubmit === 1;
      },
      //是否展示附件信息的按钮
      attach(data){
         return data.isReleased === 1;
      },
        //参加考试
      tokeTest(data,hasResult){
          console.log(data)
        this.$router.push({
          path:'/testDetail',
          query:{
            paperId:data.paperId,
            paperLogId:data.paperLogId,
            id:data.id,
            paperName:data.name,
            timeRange:data.timeRange,
            hasResult,
            isReleased:data.isReleased,
            publishType:data.publishType,
          }
        })
      },
      //   查看试卷

      //附件下载
      downLoad(data){
        if(data.fileUrls==''||data.fileUrls==null||data.fileUrls==undefined){
          this.$message.warning('暂无附件')
        }
        else{
          this.$download.name(data.fileUrls)
        }
      },
      //切换分页
      currentChange(val){
        this.currentPage = val
        console.log(val)
        this.onLoad()
      }
    }
  }
</script>

<style scoped lang="less">
    /deep/ .el-pagination.is-background .el-pager li{
        background: white;
    }
    /deep/ .el-table__body{
        border-collapse: separate;
        border-spacing:0 10px;
        /*table-layout:auto !important;*/
    }
    .changePage{
        text-align: right;
    }
    .test{
        .testBox{
            width: 1200px;
            min-height: 670px;
            /*background: #ffffff;*/
            margin: 17px auto;
            .box{
                width: 1200px;
                margin: 19px auto;
                padding-top: 19px;
                padding-bottom: 19px;
                ::v-deep.el-table{
                    .el-table__empty-block{
                        width: 100% !important;
                        background: #fff;
                        min-height: 600px;
                    }
                }

            }
        }
        .pageBox{
            width: 1200px;
            margin-top: 20px;
            height: 40px;
            position: relative;
            .page{
                position: absolute;
                right: 40px;
                bottom: 10px;
                border: 1px solid #E8E8E8;
                width: auto;
            }

            ::v-deep.el-pagination{
                .el-pager{
                    .number{
                        color: #999999;
                    }
                    .active{
                        color: #39A5EF;
                    }
                    .more{
                        color: #999999;
                    }
                }
            }
        }

    }
</style>
